<template>
  <section>
    <div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
      <span class="title">检索管理</span>
      <div class="body">
        <span>职务类型:</span>
        <select class="longSelect" v-model="dutiesSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in dutiesOption" :label="item.POSITION" :value="key"></option>
        </select>
        <span>年级:</span>
        <select class="select" v-model="gradeSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
        </select>
        <span>学科:</span>
        <select class="select" v-model="subjectSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in subjectOption" :label="item.subject" :value="item.id"></option>
        </select>
        <el-button type="primary" @click="clearData()" size="small">重置</el-button>
        <div class="right">
          <el-select v-model="selectValue" filterable clearable placeholder="请输入教师姓名" size="small">
            <el-option
              v-for="item in allNameData"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
          <el-button type="primary" @click="getTeacherNameData()" size="small">搜索</el-button>
        </div>
      </div>
      <div class="bottom">
        <a :href="`http://119.23.36.128:8020/yxt-web/teacher/manage/teacherinfo/template?yxt-xtoken=${exportUrl}`">
          <el-button type="primary" size="small">下载模板</el-button>
        </a>
        <a :href="`http://119.23.36.128:8020/yxt-web/teacher/manage/teacherinfo/export?yxt-xtoken=${exportUrl}`">
          <el-button type="primary" size="small">导出</el-button>
        </a>
        <el-button type="primary" size="small" @click="uploadshow">上传</el-button>
      	<div class="right"><el-button type="success" @click="upshow()" size="small">新建</el-button></div>
      </div>
    </div>
    <div class="model management">
      <img :src="IMGBASE64.JIAOSHXINXIIGUANLI2X" class="pink">
    	<span class="title">教师管理</span>
    	<div class="kong"></div>
    	<template>
    		<el-table :data="teacherData" style="width: 100%" @cell-click="showDetails" @row-click="deleteTeaData">
          <el-table-column prop="value" label="#" min-width="100" align="center"></el-table-column>
    			<el-table-column prop="name" label="姓名" min-width="100" align="center"></el-table-column>
    			<el-table-column prop="idNo" label="身份证号" min-width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="mobile" label="手机号" min-width="140" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="grade" label="年级" min-width="80" align="center"></el-table-column>
    			<el-table-column prop="subject" label="学科" min-width="100" align="center"></el-table-column>
    			<el-table-column prop="type2" label="职务类型" width="180" align="center" :show-overflow-tooltip='true'></el-table-column>
    			<el-table-column prop="openid" label="微信" align="center" :show-overflow-tooltip='true'></el-table-column>
          <el-table-column prop="id" label="解绑" align="center"></el-table-column>
    			<el-table-column label="操作" align="center" min-width="110">
    				<template scope="scope">
    					<el-button type="text" size="small">修改</el-button>
    				</template>
    			</el-table-column>
    		</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
    	</template>
    </div>

    <div class="model up" v-show="upShow">
      <img :src="IMGBASE64.GREENXINZENG2X" class="orange">
      <span class="title">新增教师</span>
      <el-button icon="close" class="close" @click="upshow()"></el-button>
      <div class="header">
        <span class="title">基本信息</span>
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
          <span class="error">请务必准确填写本人的真实姓名，提交后不能更改</span>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input v-model="form.mobile"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.idNo"></el-input>
        </el-form-item>
        <el-col :span="10">
          <el-form-item label="年级号">
            <select class="select" v-model="form.grade" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
              <option v-for="(item, key) in gradeOption" :label="item" :value="key"></option>
            </select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="学科">
            <select class="select" v-model="form.subjectId" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
              <option v-for="item in subjectOption" :label="item.subject" :value="item.id"></option>
            </select>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="身份">
            <select class="select" v-model="form.position" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
              <option v-for="item in dutiesOption" :label="item.POSITION" :value="item.ID"></option>
            </select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="现住地址">
            <el-input v-model="form.homeAddr"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <el-col :span="24">
        <div class="bottom">
          <div class="left">
            <el-checkbox v-model="checked">继续新建</el-checkbox>
          </div>
          <div class="right">
            <el-button type="success" @click="addTeacherMsg">确定</el-button>
            <el-button @click="upshow">取消</el-button>
          </div>
        </div>
      </el-col>
    </div>

    <div class="details" v-show="isDetails">
      <img :src="IMGBASE64.XIANGQING2X" class="icon">
      <span class="title">详情</span>
      <el-button icon="close" class="close" @click="detailsShow()"></el-button>
      <div class="body">
        <el-form label-width="80px">
          <el-col :span="24">
            <el-form-item label="姓名">
              <span>{{detailsForm.name}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="联系方式">
              <span>{{detailsForm.mobile}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份证号">
              <span>{{detailsForm.idNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年级">
              <span>{{detailsForm.grade}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="学科">
              <span>{{detailsForm.subject}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="身份">
              <span v-for="item in detailsForm.id">{{item}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="现住地址">
              <span>{{detailsForm.homeAddr}}</span>
            </el-form-item>
          </el-col>
        </el-form>
      </div>
    </div>

    <div class="upload" v-show="upload">
      <el-button icon="close" class="close" @click="uploadshow()"></el-button>
      <div class="uploadButton">
        <el-upload
          class="upload-demo"
          ref="upload"
          action="http://119.23.36.128:8020/yxt-web/teacher/manage/teacherinfo/import"
          :on-preview="handlePreview"
          :on-remove="removeFile"
          :on-change="choseFile"
          :auto-upload="false">
          <el-button slot="trigger" type="primary" :disabled="selectFile" size="small">选取文件</el-button>
          <el-button style="margin-left: 10px;" type="success" @click="submitUpload" size="small">上传到服务器</el-button>
        </el-upload>
      </div>
    </div>

    <transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      file: [],
      upload: false,
      selectFile: false,
      exportUrl: null,
      checked: false,
      upShow: false,
      isSuccess: false,
      isDetails: false,
      ncmClear: null,
      teacher: null,
      selectValue: null,
      teacherData: [],
      dutiesSelect: null,
      dutiesOption: [],
      gradeSelect: null,
      gradeOption: [],
      subjectSelect: null,
      subjectOption: [],
      total: 0,
      page: 1,
      paging: true,
      state2: null,
      id: 0,
      allNameData: [],
      form: {
        name: null,
        mobile: null,
        idNo: null,
        grade: null,
        subjectId: null,
        position: null,
        homeAddr: null
      },
      detailsForm: {
        name: null,
        mobile: null,
        idNo: null,
        grade: null,
        subject: null,
        id: null,
        homeAddr: null
      }
    }
  },
  mounted () {
    this.getDutiesData()
    this.getTeacherNameData()
    this.getGradeData()
    this.getSubjectData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    _exportUrl () {
      let _cookie = document.cookie.split(';')
      let _cookieArray = []
      _cookie.forEach(v => {
        let _d = v.split('=')
        _cookieArray.push({
          key: _d[0],
          value: _d[1]
        })
      })
      return _cookieArray[0].value
    },
    handleClick () {
      console.log('1')
    },
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTeacherNameData()
    },
    querySearch (queryString, cb) {
      var restaurants = this.restaurants
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter (queryString) {
      return (restaurant) => {
        return (restaurant.value.indexOf(queryString.toLowerCase()) === 0)
      }
    },
    getTeacherNameData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'teacher/manage/query', {page: (this.page), rows: 20, subjectId: this.subjectSelect, teacherName: this.selectValue, grade: this.gradeSelect}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.teacherData = response.data.data.rows
          this.total = response.data.data.total
          this.getAllData()
          console.log(this.teacherData)
          for (var i = 0; i < this.teacherData.length; i++) {
            this.teacherData[i].value = i + 1
            if (this.teacherData[i].position !== null) {
              this.teacherData[i].type = this.teacherData[i].position.split(',')
              this.teacherData[i].type2 = []
              for (var g = 0; g < this.teacherData[i].type.length; g++) {
                for (var h = 0; h < this.dutiesOption.length; h++) {
                  if (parseInt(this.teacherData[i].type[g]) === parseInt(this.dutiesOption[h].ID)) {
                    this.teacherData[i].type2.push(this.dutiesOption[h].POSITION)
                    if (g !== this.teacherData[i].type.length - 1) {
                      this.teacherData[i].type2.push('、')
                    }
                  }
                }
              }
            }
            for (var x in this.gradeOption) {
              if (this.teacherData[i].grade === parseInt(x)) {
                this.teacherData[i].grade = this.gradeOption[x]
              }
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getAllData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'teacher/manage/query', {page: (this.page), rows: this.total}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.allNameData = response.data.data.rows
          for (var i = 0; i < this.allNameData.length; i++) {
            this.allNameData[i].value = i + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getDutiesData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'organizedepart/query', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          for (var i in response.data.data) {
            if (response.data.data[i].ID >= 1000) {
              this.dutiesOption.push(response.data.data[i])
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getGradeData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'grade/info', {}, {'headers': {'yxt-xtoken': localStorage.xtokenalue}}).then(function (response) {
        if (response.body.code === '000') {
          this.gradeOption = response.data.data.gradeMap
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSubjectData () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'teacher/subject', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.subjectOption = response.data.data
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    addTeacherMsg () {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      this.$http.post(httpUrl + 'teacher/manage/add', {name: this.form.name, mobile: this.form.mobile, idNo: this.form.idNo, grade: this.form.grade, subjectId: this.form.subjectId, position: this.form.position, homeAddr: this.form.homeAddr}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTeacherData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
      if (this.checked === true) {
        this.form.name = null
        this.form.mobile = null
        this.form.idNo = null
        this.form.grade = null
        this.form.subjectId = null
        this.form.position = null
        this.form.homeAddr = null
        this.checked = false
      } else {
        this.form.name = null
        this.form.mobile = null
        this.form.idNo = null
        this.form.grade = null
        this.form.subjectId = null
        this.form.position = null
        this.form.homeAddr = null
        this.upShow = !this.upShow
        this.isSuccess = !this.isSuccess
      }
    },
    deleteTeaData (rows, event, column) {
      let httpUrl = 'http://119.23.36.128:8020/yxt-web/'
      if (column.label === '操作') {
        this.id = rows.id
        this.$http.post(httpUrl + 'teacher/manage/del?id=' + this.id, {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
          if (response.body.code === '000') {
            this.getTeacherNameData()
          } else if (response.body.code === '887') {
            this.$router.push('/')
          } else if (response.body.code === '889') {
            this.$router.push('/')
          }
        })
      }
    },
    detailsShow () {
      this.isDetails = !this.isDetails
      this.isSuccess = !this.isSuccess
    },
    clearData () {
      this.gradeSelect = null
      this.dutiesSelect = null
      this.subjectSelect = null
    },
    uploadshow () {
      this.upload = !this.upload
      this.isSuccess = !this.isSuccess
    },
    showDetails (rows, column) {
      if (column.label !== '操作') {
        this.detailsForm.name = rows.name
        this.detailsForm.mobile = rows.mobile
        this.detailsForm.idNo = rows.idNo
        this.detailsForm.grade = rows.grade
        this.detailsForm.subject = rows.subject
        this.detailsForm.id = rows.type2
        this.detailsForm.homeAddr = rows.homeAddr
        this.isDetails = !this.isDetails
        this.isSuccess = !this.isSuccess
      }
    },
    choseFile (file, fileList) {
      if (fileList.length > 4) {
        this.selectFile = true
      }
    },
    removeFile (file, fileList) {
      this.selectFile = false
    },
    handlePreview (file) {
      console.log(file)
    },
    submitUpload () {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .longSelect{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        padding-left: 5px;
        padding-right: 18px;
      }
      .select{
        width: 13%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        padding-left: 5px;
        padding-right: 18px;
      }
      .right{
        width: 30%;
        float: right;
        margin-right: 3%;
        text-align: right;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
    .bottom{
    	.right{
				float: right;
				margin-right: 3%;
			}
			&-text{
				padding: 10px 10px;
				border: 0;
				border-bottom: 1px solid #D7D7D7;
			}
    }
  }
  
  .upload-demo{
    display: inline-block;
  }
  .close{
    position: absolute;
    right: 2%;
  }
  .up{
    width: 10%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 20px 20px 0 20px;
    z-index: 99999;
    .green{
      width: 64px;
      height: 64px;
      position: absolute;
      left: 3%;
      top: -20px;
      background: #0DBF9B;
      border-radius: 4px;
      text-align: center;
      line-height: 80px;
    }
    .title{
      margin-left: 12%;
    }
    .header{
      border-bottom: 2px solid #D7D7D7;
      padding: 30px 0 10px 0;
      margin-left: 3%;
      margin-bottom: 10px;
      .title{
        color: #FB7862;
        border-bottom: 2px solid #FB7862;
        padding: 0 0 10px 0;
        margin-left: 0;
      }
    }
    .select{
      border: 0;
      border-bottom: 1px solid #D7D7D7;
      appearance:none;
      -moz-appearance:none;
      -webkit-appearance:none;
      padding-left: 5px;
      padding-right: 18px;
    }
    .bottom{
      border-top: 1px solid #D7D7D7;
      margin-top: 20px;
      background: #F8F8F8;
      padding: 8px 0;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
      .left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
    }
  }
  .error{
    color: #FF4949;
  }

  .upload{
    width: 20%;
    position: fixed;
    left: 50%;
    top: 200px;
    margin-left: -10%;
    background: #FFF;
    border-radius: 5px;
    z-index: 99999;
    padding: 10px 10px 10px 10px;
    text-align: center;
    .uploadButton{
      margin-top: 40px;
    }
  }

  .details{
  width: 55%;
  position: fixed;
  left: 25%;
  top: 60px;
  background: #FFF;
  border-radius: 5px;
  z-index: 99999;
  padding: 20px 10px 10px 10px;
  }
</style>
